<%--
  Created by IntelliJ IDEA.
  User: acer
  Date: 2016/5/20
  Time: 21:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册页面</title>
</head>
<body>
<jsp:include page="WEB-INF/jsp/header.jsp"/>
<div>
    <div style="text-align:center;">
        <form action="/ssm/register" id="registerForm">
            <table class="table-bordered" align="center" style="text-align:center;">
                <thead>用户注册</thead>
                <tr>
                    <td>用户名</td>
                    <td><input id="registerName" name="userName" type="text"></td>
                </tr>
                <tr>
                    <td>输入密码</td>
                    <td><input id="registerPassword" name="userPassword" type="password"></td>
                </tr>
                <tr>
                    <td>确认密码</td>
                    <td><input id="registerPassword2" type="password"></td>
                </tr>
            </table>
            <button id="registerButton2" type="button">注册</button>
        </form>
    </div>
    <div id="myModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">提示</h4>
                </div>
                <div class="modal-body">
                    <p id="myModalMessage"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</div>

</body>
<script>
    $(function () {
        $("#registerButton2").one("click", register)

    });

    /**
     * 验证两个密码输入框的密码是否一致
     * 一致则进行注册
     * 不一致则重新绑定一次校验和提交事件
     */
    function validatePassword() {
        if ($("#registerPassword").val() == $("#registerPassword2").val()) {
            return true;
        } else {
            $("#registerButton2").one("click", register);
            $("#myModalMessage").html("两次密码输入不一致");
            $('#myModal').modal({
                keyboard: false
            });
            return false;
        }
    }
    function register() {
        if (validatePassword()) {
            $.post(contextPath + "register", $("#registerForm").serialize(), function (data) {
                if (data.success) {
                    $("#myModalMessage").html("注册成功，请重新登录");
                    $('#myModal').modal({
                        keyboard: false
                    });
                    //Todo 注册成功的弹出提示框
                    window.location = contextPath;
                } else {
                    $("#myModalMessage").html(data.message);
                    $('#myModal').modal({
                        keyboard: false
                    });
                    alert(data.message);
                    //Todo 注册失败的弹出提示框
                }
            })
        }
    }

</script>
</html>
